<script>
import axios from "axios";

export default {
  name: "ModifyPassword",
  data() {
    return {
      email_loading: false,
      active: 0,
      input: "",
      password:""
    }
  },
  methods: {
    sendCode(e) {
      this.email_loading = true
      axios.get("/api/code/" + this.$store.state.user.email)
          .then(resp => {
            this.email_loading = false
            if (resp.data.code === 0) {
              this.$message.success(resp.data.msg)
              e.target.innerText = "已发送(60)"
              e.target.disabled = true
              e.target.style.cursor = "not-allowed"
              let time = 59
              let inter = setInterval(function () {
                e.target.innerText = `已发送(${time})`
                time--
                if (time < 0) {
                  e.target.innerText = "重新发送"
                  e.target.disabled = false
                  e.target.style.cursor = "pointer"
                  clearInterval(inter)
                }
              }, 1000)
            } else {
              this.$message.warning(resp.data.msg)
            }
          }).catch(err => this.$message.error(err))
    },
    next() {
      console.log(this.active)
      switch (this.active) {
        case 0:
          if (this.input !== "") {
            axios.get(`/api/code/check/${this.$store.state.user.email}/${this.input}`)
                .then(res => {
                  if (res.data.code === 0) {
                    this.$message.success(res.data.msg)
                    this.input = ""
                    this.active++
                  } else {
                    this.$message.warning(res.data.msg)
                  }
                })
                .catch(err => {
                  this.$message.error(err);
                })
          } else {
            this.$message.warning("请输入验证码")
          }
          break
        case 1:
          if (this.input !== '' && /^[a-zA-Z][a-zA-Z0-9]{7,18}$/.test(this.input)) {
            this.password = this.input
            this.input = ""
            this.active++
          } else {
            this.$message.warning("密码必须是8-18位数,以字母开头,不包含特殊字符")
          }
          break
        case 2:
          if (this.input !== '' && this.input === this.password) {
            this.password = this.input
            this.active++
          } else {
            this.$message.warning("两次密码输入不一致")
          }
          break
        case 3:
          axios.get(`/api/user/setPassword/${this.password}`)
              .then(res => {
                if(res.data.code === 0) {
                  axios.get("/api/user/logout")
                      .then(() => {
                        this.$store.commit('setUser', {id: ''})
                        this.$router.go(0)
                      })
                }else {
                  this.$message.warning(res.data.msg)
                }
              }).catch(err => this.$message.error(err))
          break
      }

    }
  },
  mounted() {
    this.active = 0
  }
}
</script>

<template>
  <div class="se_cont">
    <el-steps :active="active" finish-status="success">
      <el-step></el-step>
      <el-step></el-step>
      <el-step></el-step>
    </el-steps>
    <div v-if="active === 0">
      <div class="se_box">发送验证码到{{ $store.state.user.email }}</div>
      <div class="se_input_box">
        <el-input v-model="input"></el-input>
        <button class="se_btn" @click="sendCode" v-loading="email_loading">发送验证码</button>
      </div>
    </div>

    <div v-if="active === 1">
      <div class="se_box">输入新密码</div>
      <el-input v-model="input"></el-input>
    </div>

    <div v-if="active === 2">
      <div class="se_box">再输入一次密码</div>
      <el-input v-model="input"></el-input>
    </div>

    <div v-if="active === 3">
      <div style="font-size: 25px;margin-top: 20px;font-weight: bold">点击完成,重新登陆后，修改密码成功</div>
    </div>

    <div class="next">
      <button @click="next"><i :class="active===3?'el-icon-check':'el-icon-right'"></i></button>
    </div>
  </div>
</template>

<style scoped>

</style>